<template>
  <MainHeader
    title="Daily"
    description="Voice one's opinions freely"
    bgUrl="https://jiangeges.oss-cn-heyuan.aliyuncs.com/front-end/cyberpunk-daily.png">
  </MainHeader>
  <div class="main-daily">
    <el-card>
      <div v-if="getUserInfo?.id">
        <CommentInput
          ref="dailyInputRef"
          :parent="false"
          v-model:input-text="dailyText"
          :multiplyImage="true"
          placeholder="说点什么吧~"
          @update:inputText="updateDailyText"
          @publish="publishDaily"
        ></CommentInput>
      </div>
      <div v-for="daily in dailyList" :key="daily.id" class="comment-card">
        <div class="comment-left">
          <!-- 头像-->
          <el-avatar :size="32" :src="daily.avatar" />
        </div>
        <div class="comment-right">
          <span class="comment-username">{{ daily.authorName }}</span>
          <!-- 评论内容 -->
          <div class="comment-body">
            <p v-html="daily.content"></p>
            <div class="display-images">
              <el-image
                v-for="(image, index) in daily.images"
                :key="index"
                v-if="daily.images.length"
                :src="image"
                :zoom-rate="1.2"
                :max-scale="7"
                :min-scale="0.2"
                :preview-src-list="daily.images"
                :initial-index="index"
                fit="cover"
              />
            </div>
          </div>
          <div class="comment-footer">
            <span>{{ daily.createDate }}</span>
            <span @click="dailyAction(daily)">
              <svg
                t="1728311247743"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="5363"
                width="16"
                height="16"
              >
                <path
                  d="M939.358251 423.424662c-23.01825-37.252439-62.924121-60.779272-107.019409-63.209624-2.755764-0.38681-5.510504-0.579191-8.347109-0.579191l-152.202471-0.121773c6.649444-28.975938 10.015098-58.653865 10.015098-88.657202 0-28.223808-3.213181-57.139372-9.556657-85.952604-0.447185-2.043542-1.098008-4.006244-1.932002-5.866614-15.820314-57.302077-67.37755-96.841605-127.282918-96.841605-72.827679 0-132.081201 59.254545-132.081201 132.081201 0 3.334955 0.132006 6.66991 0.406253 10.015098-2.196015 57.211003-32.108279 109.947088-80.269162 141.363611-14.447037 9.42465-18.524912 28.773324-9.099239 43.220361 9.414417 14.437827 28.752858 18.535145 43.220361 9.099239 65.811892-42.925648 106.429984-115.325585 108.656699-193.684234 0.030699-1.332345-0.010233-2.663666-0.14224-3.996011-0.203638-2.012843-0.304945-4.016477-0.304945-6.019087 0-38.381146 31.233352-69.614497 69.614497-69.614497 32.57593 0 60.474326 22.204721 67.824735 53.997821 0.356111 1.534959 0.823761 3.019777 1.402953 4.453429 4.696975 22.814612 7.076162 45.579081 7.076162 67.743894 0 37.485753-6.222725 74.352405-18.494213 109.592001-3.324722 9.546424-1.819438 20.111037 4.02671 28.345582 5.856381 8.245801 15.332197 13.146415 25.448602 13.156648l193.226816 0.101307c1.423419 0.264013 2.857071 0.426719 4.300956 0.477884 24.116257 0.9967 45.935192 13.614066 58.603723 34.090423 7.838525 12.31242 11.438517 26.800389 10.431583 41.939181-0.080841 0.945535-0.121773 1.911536-0.11154 2.877537 0 0.854461 0.040932 1.697665 0.11154 2.53166 0.010233 0.335644-0.030699 0.661056-0.11154 0.976234-0.101307 0.376577-0.193405 0.772596-0.284479 1.159406l-74.972529 330.391802c-0.914836 1.281179-1.738597 2.6432-2.449795 4.046153-5.937223 11.762905-14.660908 21.48329-25.346271 28.172643-10.746762 6.812149-23.059182 10.614755-35.757388 11.06194-0.854461-0.061398-513.766226-0.224104-513.766226-0.224104-0.467651-0.020466-0.935302-0.030699-1.402953-0.030699 0 0-111.01542 0.172939-112.718201 0.457418-1.932002 0-3.446495-1.50426-3.446495-3.415796l0.299829-416.334173c0-1.901303 1.545192-3.446495 3.01466-3.456728l1.245364 0.121773c1.174756 0.132006 2.653433 0.284479 3.52836 0.193405l83.82822-0.222057 0 339.367221c0 17.253966 13.979386 31.233352 31.233352 31.233352s31.233352-13.979386 31.233352-31.233352L281.009092 435.350273c0-1.778506 0-8.631588 0-10.411117 0-17.253966-13.979386-30.928407-31.233352-30.928407-1.50426 0-117.547183 0.304945-119.402437 0.304945-36.34272 0-65.913199 29.566386-65.913199 65.893756l-0.299829 416.334173c0 36.337603 29.571503 65.902966 65.913199 65.902966 2.541893 0 111.406323-0.457418 111.406323-0.457418 0.457418 0.020466 0.925069 0.030699 1.382487 0.030699 0 0 511.458671 0.274246 512.505513 0.274246 25.469068 0 50.296523-7.197936 71.647807-20.73116 19.612687-12.281721 35.777855-29.881564 46.839795-50.967812 3.660366-5.622044 6.435573-11.875468 8.256034-18.615986 0.11154-0.416486 0.213871-0.823761 0.304945-1.240247l74.881454-330.340637c1.596358-6.212492 2.257413-12.586666 2.00261-18.992563C960.892707 473.366098 953.948551 446.331371 939.358251 423.424662z"
                  :fill="daily.action ? '#05adeb' : '#999999'"
                  p-id="5364"
                ></path>
                <path
                  d="M450.027553 518.650467c-17.253966 0-31.233352 13.979386-31.233352 31.233352l0 30.470989c0 17.253966 13.979386 31.233352 31.233352 31.233352 17.253966 0 31.233352-13.979386 31.233352-31.233352l0-30.470989C481.260905 532.629853 467.281519 518.650467 450.027553 518.650467z"
                  :fill="daily.action ? '#05adeb' : '#999999'"
                  p-id="5365"
                ></path>
                <path
                  d="M693.805696 518.650467c-17.253966 0-31.233352 13.979386-31.233352 31.233352l0 30.470989c0 17.253966 13.979386 31.233352 31.233352 31.233352 17.253966 0 31.233352-13.979386 31.233352-31.233352l0-30.470989C725.039048 532.629853 711.058638 518.650467 693.805696 518.650467z"
                  :fill="daily.action ? '#05adeb' : '#999999'"
                  p-id="5366"
                ></path>
                <path
                  d="M648.940882 660.09492c-14.304797-9.393951-33.592073-5.398964-43.159986 8.763594-0.132006 0.193405-13.614066 19.754926-34.171264 19.754926-19.98824 0-32.423457-18.09717-33.266661-19.368116-9.17087-14.427594-28.254507-18.809391-42.834574-9.770528-14.650675 9.109472-19.155269 28.366048-10.055007 43.016723 11.214413 18.047028 41.96988 48.588625 86.156242 48.588625 43.962258 0 75.104535-30.318516 86.572728-48.222281C667.404396 688.461991 663.216004 669.500127 648.940882 660.09492z"
                  :fill="daily.action ? '#05adeb' : '#999999'"
                  p-id="5367"
                ></path>
              </svg>
            </span>
            <span>{{ daily.like }}</span>
            <span @click="showReply(daily)">
              {{ daily.reply ? "收起" : "评论" }}
            </span>
            <span
              v-if="getUserInfo.id === daily.userId"
              style="color: red"
              @click="deleteClick(daily.id)"
              >删除</span
            >
          </div>
          <div class="daily-comment">
            <Comments
              v-show="daily.reply"
              :createId="daily.id"
              :type="_Type"
              :comments="commentList"
              :commentTotal="commentTotal"
              @refresh-comment="refreshComment"
              @order-change="orderChange"
            ></Comments>
          </div>
        </div>
        <!-- <el-divider /> -->
      </div>
    </el-card>
  </div>
  <el-dialog
    v-model="dialogVisible"
    title="Tips"
    width="500"
  >
    <span>是否删除说说</span>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="deleteDaily">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import Comments from "@/components/Comments/index.vue";
import CommentInput from "@/components/Comments/CommentInput.vue";
import MainHeader from '@/components/MainHeader/index.vue';
import { onMounted, ref } from "vue";
import { createDaily, deleteDailyById, getDaily } from "@/api/daily";
import { user } from "@/store";
import { likeSomething, unlikeSomething } from "@/api/like";
import { getCommentByCreateId } from "@/api/comment";
import {
  uploadImageToOss,
} from "@/utils/tools";
import { ElMessage, ElNotification } from "element-plus";
import { Daily } from "@/interface/daily";
import { Comment } from "@/interface/user";
const _Type = 2;
const { getUserInfo } = user();

const dailyText = ref<string>("");

const dailyList = ref<Daily[]>([]);
// 评论内容
const commentList = ref<Comment[]>([]);
// 评论总数
const commentTotal = ref<number>(0);

const dialogVisible = ref<boolean>(false);

const deleteDailyId = ref<number>(0);

const dailyInputRef = ref<InstanceType<typeof CommentInput>>();

const updateDailyText = (val: { text: string; parent: boolean }) => {
  dailyText.value = val.text;
};

const uploadImages = (fileList: FileList, type: number) => {
  return new Promise((resolve, reject) => {
    const promiseList = Array.from(fileList).map((file: File) => {
      return uploadImageToOss(file, type);
    });
    Promise.all(promiseList)
      .then((res: any) => {
        res.forEach((result: any) => {
          if (!(result instanceof Error) && dailyInputRef.value) {
            setTimeout(() => {
              dailyInputRef?.value?.clear();
            }, 200);
          }
          resolve(res);
        });
      })
      .catch((err: Error) => reject(err));
  });
};
const publishDaily = async (val: any) => {
  let imgUrlList: any = [];
  if (val.data.length) {
    imgUrlList = await uploadImages(val.data, 5);
  }
  console.log(dailyText.value);
  try {
    const res = await createDaily({
      content: dailyText.value,
      avatar: getUserInfo?.headPic || "",
      images: imgUrlList.join(","),
    });
    if (res?.status === 201) {
      ElNotification.success({
        message: "发布成功",
        duration: 1000,
        title: "Success",
      });
      getAllDaily();
    }
  } catch (error) {
    console.log(error);
  }
};

const dailyAction = async (daily: any) => {
  try {
    if (!daily.action) {
      const res = await likeSomething({
        createId: daily.id,
        authorId: daily.userId,
        type: _Type,
      });
      if (res?.status === 201) {
        daily.action = !daily.action;
        daily.like += 1;
      } else {
        return ElNotification.error({
          message: "点赞失败",
          duration: 1000,
          title: "Failed",
        });
      }
    } else {
      const res = await unlikeSomething({
        createId: daily.id,
        type: _Type,
      });
      if (res?.status === 201) {
        daily.action = !daily.action;
        daily.like -= 1;
      } else {
        return ElNotification.error({
          message: "点赞失败",
          duration: 1000,
          title: "Failed",
        });
      }
    }
  } catch (error) {}
};

const deleteClick = (id: number) => {
  deleteDailyId.value = id;
  dialogVisible.value = true;
};
const deleteDaily = async () => {
  try {
    const res = await deleteDailyById(deleteDailyId.value);
    dialogVisible.value = false;
    if (res?.status === 200) {
      getAllDaily();
      ElNotification.success({
        message: "删除成功",
        duration: 1000,
        title: "Success",
      });
    } else {
      ElNotification.error({
        message: "删除失败",
        duration: 1000,
        title: "Failed",
      });
    }
  } catch (error) {
    dialogVisible.value = false;
    ElNotification.error({
      message: "删除失败",
      duration: 1000,
      title: "Failed",
    });
  }
};
const orderChange = () => {};
// 刷新评论
const refreshComment = async (data: {
  createId: number;
  orderType: string;
}) => {
  const { createId, orderType } = data;
  try {
    // 需要增加userId，因为接口不需token
    let params: any = {
      createId: createId,
      type: _Type,
      orderType: orderType,
    };
    getUserInfo?.id ? (params.userId = getUserInfo.id) : "";
    const res = await getCommentByCreateId(params);
    commentList.value = res?.data?.data;
    commentTotal.value = res?.data?.total || 0;
  } catch (error: any) {
    ElMessage(error?.message || "网络错误");
  }
};

const showReply = async (daily: any) => {
  daily.reply = !daily.reply;
  if (daily.reply) {
    refreshComment({ createId: daily.id, orderType: "new" });
  }
};

const getAllDaily = async () => {
  try {
    const res = await getDaily(getUserInfo?.id);
    if (res?.status === 200) {
      dailyList.value = res.data.map((daily: any) => {
        daily.images = daily?.images?.split(",") || [];
        daily.reply = false;
        return daily;
      });
    } else {
      ElNotification.error({
        title: "Failed",
        message: "获取列表失败",
        offset: 100,
      });
    }
  } catch (error) {
    console.log(error);
  }
};
onMounted(() => {
  getAllDaily();
});
</script>

<style lang="scss" scoped>
.main-daily {
  margin: 0 auto;
  min-height: calc(100vh - 20rem);
  .el-card {
    :deep(.el-card__body) {
      padding: 0;
    }
    min-height: calc(100vh - 30rem);
    .write-daily {
      width: 120px;
      cursor: pointer;
    }
  }

  .comment-card {
    display: flex;
    margin-bottom: 15px;
    margin-top: 20px;
    border-bottom: 1px solid #e8e8e8;
    .comment-left {
      width: 32px;
      margin-right: 10px;
    }
    .comment-right {
      flex: 1;
      .comment-username {
        font-size: 13px;
        color: #da4d8f;
        font-weight: bold;
      }
    }
    .comment-body {
      margin-top: 5px;
      // margin-left: 50px;
      font-size: 1em;
      p {
        white-space: pre-wrap;
        word-wrap: break-word;
      }
    }
  }
}
.comment-footer {
  display: flex;
  align-items: center;
  margin-top: 6px;
  font-size: 13px;
  color: gray;
  span {
    cursor: pointer;
  }
}
.daily-comment {
  margin-top: 10px;
}
// pc
@media screen and (min-width: 768px) {
  .main-daily {
    max-width: 1080px;
    padding: 1rem;
    .el-card {
      padding: 2rem;
    }
  }
  .display-images {
    .el-image {
      width: 33%;
      height: 10rem;
    }
  }
  .comment-footer {
    justify-content: flex-start;
    span {
      margin-right: 40px;
    }
  }
}

@media screen and (max-width: 768px) {
  .main-daily {
    padding: 0;
    .el-card {
      padding: 1rem;
    }
  }
  .display-images {
    .el-image {
      width: 33%;
      height: 6rem;
    }
  }
  .comment-footer {
    justify-content: space-between;
  }
}
</style>
